{% extends 'layout.html' %}
{% block title %}视频推理机列表{% endblock %}
{% block content %}
<div class="container">
    <div class="row">
        <div class="col">
            <table class="table table-striped">
                <thead>
                        <tr>
                            <th>换电站</th>
                            <th>序列号</th>
                            <th>远程访问</th>
                            <th>联网状态</th>
                            <th>最后联网时间</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for aibox in current_page %}
                    <tr>
                        <td><a href="/station/{{aibox.station_id}}">{{ aibox.station_name }}</a></td>
                        <td><a href="/aibox_update/{{aibox.station_id}}">{{ aibox.aibox.aibox_sn }}</a></td>
                        <td><a target="_blank" href="{{ aibox.aibox.aibox_url }}">{{ aibox.aibox.aibox_url }}</a></td>
                        <td>
                            {% if aibox.aibox.online_state == True %}
                            <button class="btn btn-success">在线</button>
                            {% else %}
                            <button class="btn btn-danger">离线</button>
                            {% endif %}
                        </td>
                        <td>{{ aibox.aibox.last_online_time|date:'Y-m-d H:i:s' }}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
            </table>
        </div>
    </div>
    <!-- 分页控件 -->
    {% if paginator.num_pages > 1 %}  <!-- 只有多页时才显示分页 -->
    <div class="flex items-center justify-between border-t border-gray-200 px-4 py-3 sm:px-6">
        <!-- 分页信息 -->
        <div class="hidden sm:block">
            <p class="text-sm text-gray-700">
                显示第 <span class="font-medium">{{ current_page.number }}</span> 页，
                共 <span class="font-medium">{{ paginator.num_pages }}</span> 页，
                总计 <span class="font-medium">{{ paginator.count }}</span> 条记录
            </p>
        </div>

        <!-- 页码导航 -->
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
            <!-- 上一页 -->
            {% if current_page.has_previous %}
                <a href="?page={{ current_page.previous_page_number }}"
                   class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">上一页</span>
                    <i class="fa fa-chevron-left text-xs"></i>
                </a>
            {% else %}
                <!-- 上一页不可用时禁用 -->
                <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-500 cursor-not-allowed">
                    <i class="fa fa-chevron-left text-xs"></i>
                </span>
            {% endif %}

            <!-- 页码列表（只显示当前页附近的页码） -->
            {% for num in current_page.paginator.page_range %}
                {% if current_page.number == num %}
                    <!-- 当前页 -->
                    <span class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        {{ num }}
                    </span>
                {% elif num > current_page.number|add:'-3' and num < current_page.number|add:'3' %}
                    <!-- 显示当前页前后2页 -->
                    <a href="?page={{ num }}"
                       class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        {{ num }}
                    </a>
                {% elif num == 1 or num == paginator.num_pages %}
                    <!-- 显示第一页和最后一页 -->
                    <a href="?page={{ num }}"
                       class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        {{ num }}
                    </a>
                {% elif num == current_page.number|add:'-3' or num == current_page.number|add:'3' %}
                    <!-- 显示省略号 -->
                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                        ...
                    </span>
                {% endif %}
            {% endfor %}

            <!-- 下一页 -->
            {% if current_page.has_next %}
                <a href="?page={{ current_page.next_page_number }}"
                   class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">下一页</span>
                    <i class="fa fa-chevron-right text-xs"></i>
                </a>
            {% else %}
                <!-- 下一页不可用时禁用 -->
                <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-500 cursor-not-allowed">
                    <i class="fa fa-chevron-right text-xs"></i>
                </span>
            {% endif %}
        </nav>
    </div>
    {% endif %}
</div>
{% endblock %}